<!--Api添加列表-->
<template>
  <div class="all bg1">
    <VSubMenu class="menu" :menu="menu" :menus="menus" @menuClick="menuClick"></VSubMenu>

    <!--录入API-->
    <list class="list" v-if="menu == 0">
      <refresh @refresh="refresh" :display="isRefresh ? 'show' : 'hide'">
        <loading-indicator class="load text2"></loading-indicator>
      </refresh>
      <cell v-for="(item, index) in exchanges" v-bind:key="index">
        <div class="cell" @click="addClick(item)">
          <LImage class="img-logo" :src="Config.img('v2_'+item.exchangeName.toLowerCase()+'.png')"></LImage>
          <div class="all">
            <text class="font32 text2">{{item.exchangeName}}</text>
            <text class="font24 text3">{{item.tipe}}</text>
          </div>
          <LImage class="img-add" :src="Config.img('v2_jia.png')"></LImage>
          <div class="line line1"></div>
        </div>
      </cell>
    </list>
    
    <!--交易所开户-->
    <list class="list" v-else>
      <refresh @refresh="refresh" :display="isRefresh ? 'show' : 'hide'">
        <loading-indicator class="load text2"></loading-indicator>
      </refresh>
      <cell v-for="(item, index) in exchanges" v-bind:key="'open'+index">
        <div class="cell">
          <LImage class="img-logo" :src="Config.img('v2_'+item.exchangeName.toLowerCase()+'.png')"></LImage>
          <div class="all">
            <text class="font32 text2">{{item.exchangeName}}</text>
            <text class="font24 text3">{{T(item.describe)}}</text>
          </div>
          <div class="but main1" @click="openClick(item)">
            <text class="font24 text1">{{T('开户')}}</text>
          </div>
          <div class="line line1"></div>
        </div>
      </cell>
    </list>

  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.menu {
  height: 60px;
  margin-top: 20px;
}
.list {
  flex: 1;
}
.load {
  height: 40px;
  width: 40px;

  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 355px;
}
.cell {
  flex-direction: row;
  align-items: center;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.line {
  position: absolute;
  height: 1;
  left: 40;
  right: 40;
  bottom: 0;
}
.img-logo {
  width: 68px;
  height: 68px;
  border-radius: 18px;

  margin-right: 30px;
}
.img-add {
  width: 24px;
  height: 24px;
  margin-left: 30px;
}
.but {
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 8px;

  padding-left: 20px;
  padding-right: 20px;
}
</style>

<script>

//组件
import VSubMenu from '@/_public/VSubMenu.vue'; 

//功能
import jnavigator from "@/_js/navigator";
import jhttps from "@/_js/https";
import jconfig from "@/_js/config";
import jmodal from "@/_js/modal";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("添加API"));

export default {

  components: {
    VSubMenu,
  },

  data() {
    return {
      T:T,
      Config:jconfig,

      menu: 0,
      // menus:[T('开通API'), T('添加API'), T('交易所开户')],
      menus:[T('添加API'), T('交易所开户')],

      isRefresh:false, //显示刷新
      exchanges:[], //交易所列表
    };
  },

  created() {
    var param = weex.config;
    this.menu = param.menu ? param.menu : this.menu;
    this.refresh();
  },

  methods: {

    refresh() {
      switch (this.menu) {
        case 0:
          this.httpExchanges()
          break;
        default:
          this.httpOpenExchanges();
          break;
      }
    },

    initData(datas) {
      for (let index = 0; index < datas.length; index++) {
        var item = datas[index];

        var tipe = item.supportContract;
        tipe = tipe.replace("spot", T('币币'));
        tipe = tipe.replace("contract_usdt", T('USDT本位合约'));
        tipe = tipe.replace("contract", T('币本位合约'));
        tipe = T('支持&{1}交易').replace("&{1}", tipe);
        item.tipe = tipe;
      }
      return datas;
    },

    /********************************** HTTP*/
    //支持交易所列表
    httpExchanges() {
      if (this.isRefresh) return;
      this.isRefresh = true;
      var param = {};
      jhttps.post("quoteV3/queryExchangeList", param,true,(data) => {
        this.isRefresh = false;
          if (data.status == 200) {
            this.exchanges = this.initData(data.data);
          } else {
            jmodal.toast(data.msg);
          }
        }
      );
    },

    //支持交易所开户列表
    httpOpenExchanges() {
      if (this.isRefresh) return;
      this.isRefresh = true;
      var param = {};
      jhttps.post("assetsV2/queryExchangeOpenList", param,true,(data) => {
        this.isRefresh = false;
          if (data.status == 200) {
            this.exchanges = data.data;
          } else {
            jmodal.toast(data.msg);
          }
        }
      );
    },

    /********************************** 点击触发*/
    //菜单点击
    menuClick(index) {

      this.menu = index;
      this.datas = [];
      this.refresh();
    },

    //添加点击
    addClick(item) {
      
      //特殊交易所，直接开通
      if (item.exchangeName.toLowerCase() == 'uniswap') {
        var param = {'api':item, 'exchanges':this.exchanges}
        var nav = {'navColor':'#0c0c0c'};
        jnavigator.openDialog('home/ApiAddFound', param, nav);
        return;
      }


      var param = {'api':item, 'exchanges':this.exchanges}
      var nav = {'navColor':'#0c0c0c'};
      jnavigator.open('', 'home/ApiAddInfo', param, nav);
    },

    //交易所开户
    openClick(item) {
      weexFunction.showWebUrl(item.openUrl);
    }
  },
};

</script>
